<template>
  <view class="page">
    <view class="container">

      <!-- 🆕 新增代码开始：就诊人信息列表 -->
      <view
          class="patient-card"
          v-for="(patient, index) in patients"
          :key="patient.id"
      >
        <!-- 第一行：姓名、电话、删除 -->
        <view class="patient-header">
          <text>{{ patient.name }}</text>
          <text>{{ maskPhone(patient.phone) }}</text>
          <text class="delete-icon" @click="deletePatient(index)">🗑️</text>
        </view>

        <!-- 第二行：性别、关系、城市、区域 -->
        <view class="patient-info">
          <text>{{ patient.gender }}</text>
          <text>{{ patient.local }}</text>
        </view>

        <!-- 第三行：身份证号 -->
        <view class="patient-id">
          身份证号码: {{ maskIdCard(patient.idCard) }}
        </view>
      </view>
      <!-- 🆕 新增代码结束 -->

      <!-- 添加就诊人按钮 -->
      <button class="add-btn" @click="navigateToAddPatient">添加就诊人</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      patients: [],
    };
  },
  methods: {
    mounted() {
      // 监听新增就诊人事件
      uni.$on('addPatient', (newPatient) => {
        this.patients.push({
          ...newPatient,
          city: newPatient.region[1],
          area: newPatient.region[2],
        });
      });
    },
    // 🆕 手机号脱敏处理
    maskPhone(phone) {
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    // 🆕 身份证号脱敏处理
    maskIdCard(idCard) {
      return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2');
    },
    // 🆕 从数据库中删除就诊人
    deletePatient(patientId, index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该就诊人吗？',
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: `http://localhost:8080/app/registration/delete/${patientId}`,
              method: 'DELETE',
              success: (result) => {
                if (result.statusCode === 200) {
                  this.patients.splice(index, 1); // 从列表中移除
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success',
                  });
                } else {
                  uni.showToast({
                    title: result.data || '删除失败',
                    icon: 'none',
                  });
                }
              },
              fail: () => {
                uni.showToast({
                  title: '网络错误，请稍后重试',
                  icon: 'none',
                });
              }
            });
          }
        }
      });
    },
    // 🆕 跳转到新增就诊人页面
    navigateToAddPatient() {
      uni.navigateTo({
        url: `/pages/registrations/add-patient/add-patient`,
      });
    },
    getPatients() {
      var userInfo = uni.getStorageSync('userInfo');
      console.log(userInfo.id)
      uni.request({
        url: 'http://localhost:8080/app/registration/listByUserId/'+ userInfo.id,
        method: 'GET',
        success: result => {
          console.log("test", result)
          if (result.statusCode == 200) {
            this.patients = result.data
          }
        }
      })
    },
  },
  onUnload() {
    // 页面卸载时，移除事件监听
    uni.$off('addPatient');
  },
  created() {
    this.getPatients()
  }
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

.container {
  width: 100%;
  padding: 20rpx;
}

/* 🆕 就诊人卡片样式 */
.patient-card {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

/* 第一行：姓名、电话、删除图标 */
.patient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  color: #333;
}

.delete-icon {
  color: red;
  font-size: 28rpx;
}

/* 第二行：性别、关系、城市、区域 */
.patient-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #555;
}

/* 第三行：身份证号 */
.patient-id {
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #888;
}

/* 添加就诊人按钮 */
.add-btn {
  width: 100%;
  padding: 20rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
}
</style>
